<template>
    <div style="display: flex;flex-direction: column;">
        <div class="v1">
            <div>
                <div class="v2">{{ $t('text.House.l59') }}</div>
                <div class="v3">{{ $t('text.House.l60') }}</div>
            </div>
            <TimePageNavList :timeNavList="timeNavList.data" :defaultClick="timeNavList.defaultClick" @returnData="setPage">
            </TimePageNavList>
        </div>
        <div class="v4">
            <div v-for="item in tableList" v-bind:key="item" class="v5">{{ item }}</div>
        </div>
        <div>
            <div v-for="item in VisitorRecordList" v-bind:key="item" class="v6">
                <div v-for="i in item" v-bind:key="i" class="v5">
                    {{ i }}
                </div>
            </div>
        </div>
    </div>
</template>
    
<script>
import TimePageNavList from '@/components/navigation/TimePageNavList.vue';
import { VisitorRecord } from '../../itemList'
export default {
    name: 'VisitorRecord',
    components: {
    TimePageNavList
},
    data() {
        return {
            timeNavList: {
                defaultClick: this.$t('text.House.l61'), data: [this.$t('text.House.l61'), this.$t('text.House.l62'), this.$t('text.House.l63')]
            },
            tableList: [this.$t('text.House.l64'), this.$t('text.House.l65'), this.$t('text.House.l66'),
            this.$t('text.House.l67'), this.$t('text.House.l68'), this.$t('text.House.l69')],
            VisitorRecordList: VisitorRecord
        }
    },
    mounted() {

    },
    methods: {
        setPage(index) {
            console.log(index)
            // switch (index) {
            //     case 0: ;break;
            //     case 1: ;break;
            //     case 2: ;break;
            // }
        }
    },
    watch: {

    },
    computed: {

    }

}
</script>
    
<style scoped>
.v1 {
    display: flex;
    padding-top: 30px;
    justify-content: space-between;
    padding-right: 35px;
}

.v2 {
    font-size: 14px;
    color: black;
    text-align: left;
    padding-left: 35px;
    padding-right: 35px;
    padding-bottom: 5px;
}

.v3 {
    font-size: 13px;
    color: gray;
    text-align: left;
    padding-left: 35px;
}

.v4 {
    border-bottom: 1px solid #ddd;
    margin-left: 35px;
    margin-right: 35px;
    display: flex;
    align-items: center;
    text-align: left;
}

.v5 {
    flex: 1;
    font-size: 13px;
    color: gray;
    padding-top: 20px;
    padding-bottom: 20px;
}

.v6 {
    border-bottom: 1px solid #ddd;
    margin-left: 35px;
    margin-right: 35px;
    display: flex;
    align-items: center;
    text-align: left;
    padding-top: 5px;
    padding-bottom: 15px;
}
</style>